<template>
  <view class="viewer">
    <view class="login-title">
      <image src="../../static/images/login-logo.png" />
      <span class="fs56 fw600 c1" @click="openEnv">车务通</span>
    </view>
    <view class="login-tip fs30 c2">请正确输入登录名和密码</view>
    <view class="login-in">
      <span class="fs30 c1">登录名</span>
      <view class="input-in">
        <input type="text" placeholder-class="login-input-placeholder" v-model="form.username" placeholder="请输入登录名" />
        <image class="input-clear" src="../../static/icons/icon-clear.png" v-if="form.username"
          @click="form.username = ''" />
      </view>
      <view class="input-line"></view>
    </view>
    <view class="login-in login-in-password">
      <span class="fs30 c1">密码</span>
      <view class="input-in">
        <input :type="showPassword ? 'password' : 'text'" placeholder-class="login-input-placeholder"
          v-model="form.password" placeholder="请输入密码" />
        <image class="input-password" src="../../static/icons/icon-openeye.png" v-if="showPassword && form.password"
          @click="showPassword = !showPassword" />
        <image class="input-password" src="../../static/icons/icon-closeeye.png" v-if="!showPassword && form.password"
          @click="showPassword = !showPassword" />
        <image class="input-clear" src="../../static/icons/icon-clear.png" v-if="form.password"
          @click="form.password = ''" />
      </view>
      <view class="input-line"></view>
    </view>
    <view class="login-in login-in-password" v-if="imgCodeUrl">
      <span class="fs30 c1">图片验证</span>
      <view class="input-in">
        <input placeholder-class="login-input-placeholder" v-model="form.vCode" placeholder="点击验证码可更换" />
        <image class="img-code" :src="imgCodeUrl" @click="getImgCode" />
      </view>
      <view class="input-line"></view>
    </view>
    <view class="login-button fs32" :style="form.username && form.password ? 'opacity: 1;' : 'opacity: 0.35;'"
      @click="onSubmit">登录</view>
    <view class="login-radio">
      <image class="radio-choose" v-if="!radioCheck" @click.stop="radioClick"
        src="../../static/icons/icon-checkbox.png" />
      <image class="radio-choose" v-if="radioCheck" @click.stop="radioClick"
        src="../../static/icons/icon-checkbox-select.png" />
      <view class="c2 fs26">我已阅读并同意<span class="c3" @tap="toAgree">《服务协议》</span>和<span class="c3"
          @tap="toPrivacy">《隐私政策》</span></view>
      <view class="radio-tip" v-if="tipsShow && !radioCheck">
        <view class="sj"></view>
        <span class="tips fs28">请阅读并勾选协议</span>
      </view>
    </view>
    <!-- <view class="login-bottom-tip c2 fs26">仅面向企业内部员工使用，企橙系统登录名密码登录</view>
    <view class="forget c3 fs28">
      <text @click="forgetPassword">忘记密码</text>
      <text @click="createAccount" style="margin-left: 20rpx">注册账号</text>
    </view> -->

    <!-- 环境变量弹框 -->
    <EnvModal ref="envModalRef"></EnvModal>
  </view>
</template>

<script setup lang="ts">
  import { postLoginAPI } from '@/api/common/login'
  import { userStore } from '@/stores'
  import type { LoginResult } from '@/types/user'
  import { ref } from 'vue'
  import EnvModal from './components/envModal.vue'

  const userInfoStore = userStore()
  const tipsShow = ref(false)
  const radioCheck = ref(false)
  const showPassword = ref(true)
  const form = ref({
    username: '',
    password: '',
    vCode: '',
  })
  const radioClick = () => {
    radioCheck.value = !radioCheck.value
    tipsShow.value = false
  }
  const loginSuccess = async (profile : LoginResult) => {
    if (profile) {
      // 设置用户信息
      userInfoStore.setProfile(profile)
      // 设置用户权限
      await userInfoStore.setUserPermission()
      uni.switchTab({ url: '/pages/index/index' })
    } else {
      uni.showToast({ icon: 'none', title: '登录失败' })
    }
  }
  const toPrivacy = () => {
    uni.navigateTo({ url: '/pages/agreement/privacy' })
  }
  const toAgree = () => {
    uni.navigateTo({ url: '/pages/agreement/user' })
  }
  const forgetPassword = () => {
    uni.showToast({ icon: 'none', title: '如忘记密码，请联系后台管理员' })
  }
  const createAccount = () => {
    uni.showToast({ icon: 'none', title: '请联系管理员获取账号' })
  }
  // 表单提交
  const onSubmit = async () => {
    if (!form.value.username) {
      uni.showToast({ icon: 'none', title: '请输入登录名' })
      return false
    }
    if (!form.value.password) {
      uni.showToast({ icon: 'none', title: '请输入密码' })
      return false
    }
    if (!radioCheck.value) {
      tipsShow.value = true
      return false
    }

    postLoginAPI(form.value)
      .then((res) => {
        // 需要验证码
        if (res.result.statusCode == 20) {
          getImgCode()
          uni.showToast({ icon: 'none', title: '请输入图片验证码' })
          return
        }
        loginSuccess(res.result)
      })
      // 登录失败
      .catch((err) => {
        getImgCode()
      })
  }

  // 获取图形验证码
  const imgCodeUrl = ref('')
  const getImgCode = () => {
    const baseUrl = getApp().globalData.requestUrl.replace('api/', '')
    imgCodeUrl.value = baseUrl + `/vmsLogin/getValidateCode?username=${form.value.username}&${Math.random()}`
    form.value.vCode = ''
  }

  // 打开env
  let envCount = 0
  const envModalRef = ref()
  let envTimer = 0
  const openEnv = () => {
    if (!envTimer) {
      envTimer = setTimeout(() => {
        envCount = 0
        envTimer = 0
      }, 1000)
    }
    envCount++
    if (envCount == 5) {
      envModalRef.value.open()
      envCount = 0
    }
  }
</script>

<style lang="scss" scoped>
  .viewer {
    padding: 0 64rpx;
    height: 100%;
    overflow: hidden;
  }

  .login-title {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    margin-top: 176rpx;
    margin-bottom: 32rpx;

    image {
      width: 74rpx;
      height: 74rpx;
      margin-right: 24rpx;
    }

    span {
      color: #191c27;
      font-weight: 600;
    }
  }

  .login-tip {
    margin-bottom: 60rpx;
  }

  .login-in {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    width: 100%;
    position: relative;

    .input-in {
      position: relative;
      width: 100%;

      input {
        width: 100%;
        height: 76rpx;
        padding-right: 120rpx;
      }

      .input-password {
        position: absolute;
        right: 56rpx;
        top: 20rpx;
        width: 38rpx;
        height: 38rpx;
      }

      .input-clear {
        position: absolute;
        right: 0;
        top: 24rpx;
        width: 32rpx;
        height: 32rpx;
      }

      .img-code {
        position: absolute;
        right: 0;
        top: 0rpx;
        width: 32rpx;
        height: 32rpx;
        width: 156rpx;
        height: 52rpx;
        border: 1rpx solid #e5e5e5;
      }
    }

    .input-line {
      position: absolute;
      width: 100%;
      height: 2rpx;
      transform: scaleY(0.5);
      background: #e5e5e5;
      bottom: 0;
      left: 0;
    }
  }

  .login-in-password {
    margin-top: 48rpx;
  }

  .login-button {
    margin-top: 60rpx;
    width: 100%;
    height: 88rpx;
    border-radius: 4rpx;
    text-align: center;
    line-height: 88rpx;
    color: #ffffff;
    background: #3072f6;
  }

  .login-radio {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 40rpx;
    position: relative;

    .radio-choose {
      width: 28rpx;
      height: 28rpx;
      margin-right: 8rpx;
    }

    .radio-tip {
      position: absolute;
      bottom: -80rpx;
      left: -32rpx;

      .sj {
        border-right-color: lightseagreen;
        width: 0px;
        height: 0px;
        border: 16rpx solid transparent;
        position: absolute;
        top: -44rpx;
        left: 38rpx;
        border-bottom-color: rgba(0, 0, 0, 0.8);
      }

      .tips {
        padding: 16rpx 24rpx;
        background: rgba(0, 0, 0, 0.8);
        border-radius: 8rpx;
        color: #ffffff;
      }
    }
  }

  .login-bottom-tip {
    position: fixed;
    width: 100%;
    text-align: center;
    bottom: 168rpx;
    left: 0;
  }

  .forget {
    position: fixed;
    width: 100%;
    text-align: center;
    bottom: 100rpx;
    left: 0;
  }

  .forget-line {
    position: fixed;
    width: 112rpx;
    height: 2rpx;
    bottom: 82rpx;
    left: 50%;
    margin-left: -56rpx;
    background: #3072f6;
  }

  .login-input-placeholder {
    font-size: 32rpx;
    color: #9ea5bb;
  }
</style>
